<template>
	<div class="creation-box">
		<div class="header">
			<h3>创作中心</h3>
			<el-icon :size="24" @click="drawer = true"><Operation /></el-icon>
		</div>
		<div class="main">
			<div class="left drawer-box">
				<div class="top">
					<el-button round plain size="large" color="#fa715d" 
						>新增作品</el-button
					>
					<ul>
						<li @click="handleGoIndex">
							<!-- <el-icon :size="24" color="#718096"><House /></el-icon> -->
							<span>主页</span>
						</li>
						<li @click="handleGoMyWork">
							<!-- <el-icon :size="24" color="#718096"><EditPen /></el-icon> -->
							<span>我的作品</span>
						</li>

						
					</ul>
				</div>

				<ul class="bottom">
					<li @click="routerHref('/')">
						<!-- <el-icon :size="24" color="#718096"><House /></el-icon> -->
						<span>回到首页</span>
					</li>
					<li @click="routerHref('/logIn')">
						<!-- <el-icon :size="24" color="#718096"><Aim /></el-icon> -->
						<span>退出登录</span>
					</li>
				</ul>
			</div>
			<div class="right">
				<RouterView />
			</div>
		</div>

		<el-drawer v-model="drawer" direction="ltr" size="80%" class="drawer-box-1">
			<div class="top">
				<el-button round plain size="large" color="#fa715d" 
					>新增作品</el-button
				>
				<ul>
					<li @click="phoneClick(0)">
						<!-- <el-icon :size="24" color="#718096"><House /></el-icon> -->
						<span>主页</span>
					</li>
					<li @click="phoneClick(1)">
						<!-- <el-icon :size="24" color="#718096"><EditPen /></el-icon> -->
						<span>我的作品</span>
					</li>
				</ul>
			</div>

			<ul class="bottom">
				<li @click="phoneClick(2)">
					<!-- <el-icon :size="24" color="#718096"><House /></el-icon> -->
					<span>回到首页</span>
				</li>
				<li @click="phoneClick(3)">
					<!-- <el-icon :size="24" color="#718096"><Aim /></el-icon> -->
					<span>退出登录</span>
				</li>
			</ul>
		</el-drawer>
	</div>
</template>

<script setup>
import {
	Operation,
	Setting,
	ArrowRight,
	Bell,
	Search,
	House,
	EditPen,
	Aim,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const drawer = ref(false);
const routerHref = (href) => {
	router.push(href);
};
const handleGoIndex = () => {
	router.push("/creation_center/index");
};

const handleGoMyWork = () => {
	router.push("/creation_center/myWork");
};

const phoneClick = (index) => { 
	if(index==0){
		router.push("/creation_center/index");
	}else if(index==1){
		router.push("/creation_center/myWork");
	}else if(index==2){
		router.push("/home");
	}else if(index==3){
		router.push("/login");

	}
};
</script>

<style lang="scss" scoped>

.creation-box {
	background: #f7fafc;
	height: 100vh;
	display: flex;
	flex-flow: column;

	.header {
		position: sticky;
		top: 0rem;
		flex: 0 0 auto;
		-webkit-box-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		align-items: center;
		padding-left: 1rem;
		padding-right: 1rem;
		width: 100%;
		height: 3rem;
		z-index: 30;
		border-style: solid;
		border-color: #edf2f7;
		border-bottom-width: 0.0625rem;
		display: flex;
		background: #ffffff;

		h3 {
			font-size: 1rem;
			font-weight: 400;
			color: #fa715d;
		}
		:deep(.el-icon) {
			display: block;
		}
	}

	.main {
		display: flex;
		-webkit-box-flex: 1;
		flex-grow: 1;
		width: 100%;
		overflow: hidden;
		.left {
			display: none;
			width: 16rem;
			min-height: 100%;
			flex-direction: column;
			-webkit-box-pack: justify;
			justify-content: space-between;
			overflow: hidden;
			position: relative;
			padding-top: 2rem;
			padding-left: 1rem;
			padding-right: 1rem;
			overflow: hidden auto;
			background: #ffffff;
			flex: none;
			border-right: 1px solid #edf2f7;
		}
		.right {
			flex: 1 1 auto;
			width: 100%;
			overflow: hidden auto;
			display: flex;
			flex-flow: column;
		}
	}
}
:deep(.el-drawer__header) {
	margin-bottom: 0;
}
.drawer-box {
	position: relative;
	.el-button {
		width: 100%;
		color: #fa715d;
		background: none;
		margin-bottom: 1rem;
	}
	ul {
		li {
			display: flex;
			align-items: center;
			gap: 2rem;
			height: 3rem;
			span {
				font-size: 0.875rem;
				font-weight: 400;
				line-height: 2;
				letter-spacing: 0.05em;
				color: #2d3748;
			}
		}
	}
	.bottom {
		width: 80%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 1rem;
		border-top: 1px solid #edf2f7;
	}
}

.drawer-box-1 {
	position: relative;
	.el-button {
		width: 100%;
		color: #fa715d;
		background: none;
		margin-bottom: 1rem;
	}
	ul {
		li {
			display: flex;
			align-items: center;
			gap: 2rem;
			height: 3rem;
			span {
				font-size: 0.875rem;
				font-weight: 400;
				line-height: 2;
				letter-spacing: 0.05em;
				color: #2d3748;
			}
		}
	}
	.bottom {
		width: 80%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 1rem;
		border-top: 1px solid #edf2f7;
	}
}


.moudle-box {
	display: flex;
	gap: 0rem;
	flex-direction: column;
	.module-box1 {
		flex: 7 1 0%;
	}
	.moudle-box2 {
		flex: 3 1 0%;
		max-width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.creation-box {
		.main {
			.left {
				display: flex;
			}
		}
		.header {
			:deep(.el-icon) {
				display: none;
			}
		}
	}
}

@media screen and (min-width: 1024px) {
	.moudle-box {
		gap: 2rem;
		flex-direction: row;
		.module-box2 {
			max-width: 20rem;
		}
	}
}



</style>